import { Modal, QRCode, Typography } from 'antd';
import React from 'react';

const { Paragraph, Text } = Typography;

interface Props {
  title: string;
  visible: boolean;
  value: string;
  onSubmit?: () => void;
  onCancel?: () => void;
}

const App: React.FC<Props> = (props) => {
  const { title, visible, value, onSubmit, onCancel } = props;
  return (
    <Modal
      destroyOnClose
      title={title}
      open={visible}
      footer={null}
      onCancel={() => {
        onCancel?.();
      }}
    >
      <Typography.Title level={5}>复制分享链接</Typography.Title>
      <Paragraph
        style={{
          color: '#1890ff', // 使用 Ant Design 主题色作为链接颜色
          cursor: 'pointer',
          textDecoration: 'underline',
        }}
        copyable
      >
        {value}
      </Paragraph>
      <Typography.Title style={{ marginTop: 16 }} level={5}>
        手机扫码查看
      </Typography.Title>
      <QRCode type="canvas" style={{ marginTop: 16 }} value={value} />
    </Modal>
  );
};

export default App;
